<div class="wrapper">
    <app-breadcrumb [path]="path"></app-breadcrumb>
    <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)"></app-tabs>
    <app-scrollview class="scrollview" *ngIf="selectedTab" [ngSwitch]="selectedTab.key">
        <div *ngSwitchCase="'worker_model'" class="ui grid">
            <div class="twelve wide column">
                <app-worker-model-form mode="edit" [loading]="loading" [workerModel]="workerModel" [groups]="groups"
                    [currentUser]="currentUser" [patterns]="patterns" [communications]="communications" [types]="types"
                    (save)="saveWorkerModel($event)" (saveAsCode)="saveWorkerModelAsCode($event)"
                    (delete)="deleteWorkerModel()">
                </app-worker-model-form>
            </div>
            <div class="four wide column">
                <app-worker-model-help></app-worker-model-help>
                <ng-container *ngIf="workerModel">
                    <br />
                    <div class="field" *ngIf="workerModel.created_by?.username !== ''">
                        <h3>{{'common_created_by' | translate}}</h3>
                        <div>
                            <i class="fa fa-user"></i> {{workerModel.created_by?.fullname}}
                            ({{workerModel.created_by?.username}})
                            <span *ngIf="workerModel.created_by?.admin"><b>Admin</b></span>
                        </div>
                        <div *ngIf="workerModel.created_by?.email !== ''">
                            <i class="fa fa-envelope"></i> {{workerModel.created_by?.email}}
                        </div>
                    </div>
                    <div class="field" *ngIf="workerModel.user_last_modified !== ''">
                        <h3>{{'common_last_modified' | translate}}</h3>
                        {{workerModel.user_last_modified}}
                    </div>
                    <div class="field" *ngIf="workerModel.last_registration !== ''">
                        <h3>{{'worker_model_last_registration' | translate}}</h3>
                        {{workerModel.last_registration}}
                    </div>
                    <div class="field">
                        <h3>Registration infos</h3>
                        <div>
                            Need registration : {{workerModel.need_registration}}
                        </div>
                        <div>
                            Check registration : {{workerModel.check_registration}}
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>
        <div *ngSwitchCase="'capabilities'" class="ui grid">
            <div class="sixteen wide column">
                <div class="ui raised segment">
                    <h3 class="ui header">{{'worker_model_capabilities' | translate}}
                        <i *ngIf="!workerModel.need_registration" class="fa fa-check" style="cursor:pointer"
                            title="{{'worker_model_capabilities_up_to_date' | translate}}"></i>
                        <i *ngIf="workerModel.need_registration" class="fa fa-warning" style="cursor:pointer"
                            title="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}"></i>
                    </h3>
                    <p>
                        {{'worker_model_help_capabilities' | translate}}
                    </p>
                </div>
            </div>
            <div class="sixteen wide column">
                <table class="ui fixed celled table">
                    <tr *ngFor="let v of workerModel?.registered_capabilities">
                        <td>
                            <div class="ui">{{v.value}}</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div *ngSwitchCase="'usage'" class="ui grid">
            <div class="sixteen wide column">
                <div class="ui active centered inline loader" *ngIf="loadingUsage"></div>
                <ng-container *ngIf="!loadingUsage">
                    <app-usage [pipelines]="usages"></app-usage>
                    <div class="centered" *ngIf="!usages || usages.length === 0">{{'worker_model_no_usage'
                                | translate}}</div>
                </ng-container>
            </div>
        </div>
    </app-scrollview>
</div>
